<template>
  <transition>
    <div v-if="visible">{{ type }} - {{ message }}</div>
  </transition>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      visible: false,
      duration: 2000
    }
  },
  mounted() {
    if (this.duration > 0) {
      this.timer = setTimeout(() => {
        this.$destroy()
        this.$el.parentNode.removeChild(this.$el)
      }, this.duration)
    }
  }
}
</script>

<style>
.v-enter {
  opacity: 0;
}
.v-enter-active {
  transition: all 1s;
}
</style>
